<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<script type="text/javascript">
//去掉前后空格
function deltrim(x){
	while(x.length>0 && x.charAt(0)==' ')
	 	x = x.substring(1,x.length);
	while(x.length>0&&x.charAt(x.length-1)==' ')
		x = x.substring(0,x.length-1);
	return x;
}
//非空验证
function isNull(elem,message){
	var va=deltrim(elem.value);
	if(va==""){
		alert(message);
		elem.focus();
		return false;
	}
	return true;
}
//验证账号
function validateId(){
	var first=document.forms[0].UserName.value.charAt(0);
	var exp=/^[a-z0-9]+$/;
	if(isNull(document.forms[0].UserName,"请输入用户名")){//验证非空
		//验证首字符
		return true;
	}else{
		return false;
	}
}
//验证密码
function validatepwd(){
	var exp=/^[a-z0-9]+$/;
	if(isNull(document.forms[0].PassWord,"请输入密码")){//验证非空
		if(document.forms[0].PassWord.value.length<=8){
			alert("密码大于8位");
			document.forms[0].PassWord.focus();
			return false;
		}else{
			if(exp.test(document.forms[0].PassWord.value)){
				alert("密码需要有字母和数字之外的字符!");
				document.forms[0].PassWord.focus();
				return false;
			}
		}
	}else{
		return false;
	}
	return true;
}
//提交按钮
function gogo(){
	if(validateId()    &&   validatepwd()){
		document.forms[0].submit();
		return true;
	}
	return false;
}
</script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
* {
	margin: 0;
	padding: 0;
}

html {
	height: 100%;
}

body {
	height: 100%;
	background: #fff url(images/backgroud.png) 50% 50% no-repeat;
	background-size: cover;
}

.dowebok {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 430px;
	height: 550px;
	margin: -300px 0 0 -215px;
	border: 1px solid #fff;
	border-radius: 20px;
	overflow: hidden;
}

.logo {
	width: 104px;
	height: 104px;
	margin: 50px auto 80px;
	background: url(images/login.png) 0 0 no-repeat;
}

.form-item {
	position: relative;
	width: 360px;
	margin: 0 auto;
	padding-bottom: 30px;
}

.form-item input {
	width: 288px;
	height: 48px;
	padding-left: 70px;
	border: 1px solid #fff;
	border-radius: 25px;
	font-size: 18px;
	color: #fff;
	background-color: transparent;
	outline: none;
}

.form-item button {
	width: 360px;
	height: 50px;
	border: 0;
	border-radius: 25px;
	font-size: 18px;
	color: #1f6f4a;
	outline: none;
	cursor: pointer;
	background-color: #fff;
}

#username {
	background: url(images/emil.png) 20px 14px no-repeat;
}

#password {
	background: url(images/password.png) 23px 11px no-repeat;
}

.tip {
	display: none;
	position: absolute;
	left: 20px;
	top: 52px;
	font-size: 14px;
	color: #f50;
}

.reg-bar {
	width: 360px;
	margin: 20px auto 0;
	font-size: 14px;
	overflow: hidden;
}

.reg-bar a {
	color: #fff;
	text-decoration: none;
}

.reg-bar a:hover {
	text-decoration: underline;
}

.reg-bar .reg {
	float: left;
}

.reg-bar .forget {
	float: right;
}

.dowebok ::-webkit-input-placeholder {
	font-size: 18px;
	line-height: 1.4;
	color: #fff;
}

.dowebok :-moz-placeholder {
	font-size: 18px;
	line-height: 1.4;
	color: #fff;
}

.dowebok ::-moz-placeholder {
	font-size: 18px;
	line-height: 1.4;
	color: #fff;
}

.dowebok :-ms-input-placeholder {
	font-size: 18px;
	line-height: 1.4;
	color: #fff;
}

@media screen and (max-width: 500px) {
	* {
		box-sizing: border-box;
	}
	.dowebok {
		position: static;
		width: auto;
		height: auto;
		margin: 0 30px;
		border: 0;
		border-radius: 0;
	}
	.logo {
		margin: 50px auto;
	}
	.form-item {
		width: auto;
	}
	.form-item input, .form-item button, .reg-bar {
		width: 100%;
	}
}
</style>
<title>Insert title here</title>
</head>
<body>
	<div class="dowebok">
		<div class="logo"></div>
		<form action="<%=request.getContextPath() %>/ValidataServlet"
			method="get" onsubmit="return gogo() ">
			<div class="form-item">

				<input name="UserName" type="text" autocomplete="off"
					placeholder="账号">
				<p class="tip">请输入合法的账号</p>
			</div>
			<div class="form-item">
				<input name="PassWord" type="password" autocomplete="off"
					placeholder="登录密码">
				<p class="tip">账号或密码不正确</p>
			</div>
			<div class="form-item">
				<button id="submit">登 录</button>
			</div>
		</form>
	</div>

	<script src="images/jquery.min.js"></script>
	<script>
        $(function () {
            $('input').val('')
            $('#submit').on('click', function () {
                $('.tip').show()
            })
        })
    </script>

	<div style="text-align: center;"></div>

</body>
</html>